<div class="programme album-create">
    <div class="head_title">
        <span class="news">上传节目</span>
    </div>

    <uib-tabset ng-if="$state.current.name=='main.programme'" active="search.status" class="content-margin">
        <uib-tab index="'single'" heading="自定义上传" ng-click="tabClick('single')">

            <section class="fg-section wp-20" style="border-top: none;padding-top: 40px">
                <form class="form-horizontal w5c-form" name="mainForm" novalidate w5c-form-validate>
                    <div class="form-group personal-second" ng-if="noAlbum==true" style="margin-left: 104px;color: red">

                        <label class="col-sm-3 control-label">请先创建专辑，再上传节目</label>

                    </div>
                    <div class="form-group personal-second">
                        <label class="col-sm-3 control-label"><i class="red-icon">*</i>选择专辑：</label>
                        <div class="col-sm-7 personal-head">

                            <ui-select ng-model="album.albumSelected" theme="bootstrap"
                                       ng-change="albumChange(album.albumSelected)"
                                       style="width: 300px;float: left">
                                <ui-select-match placeholder="请选择专辑">{{$select.selected.albumName}}</ui-select-match>

                                <ui-select-choices repeat="item in albumList | filter: $select.search">
                                    <span ng-bind-html="item.albumName | highlight: $select.search"></span>
                                </ui-select-choices>
                            </ui-select>
                            <div class="clear"></div>

                            <input type="text" hidden name="albumSelect" ng-model="album.albumSelected" required>
                        </div>
                    </div>

                    <div class="form-group personal-second">
                        <label class="col-sm-3 control-label">节目封面：</label>
                        <div class="col-sm-7 personal-head">
                            <span class="programCover_a">
                                <img width="100%" height="100%" src="{{formData.programCover}}"
                                     ng-if="formData.programCover">
                            </span>
                            <label>
                                <span class="mask-span" style="left: 15px;bottom: 2px">上传封面</span>
                                <input type="file" style="display: none" id="fileInput" >
                            </label>
                            <span style="color: red;position: absolute;left: 124px;top: 79px;font-size: 12px">{{errorImg}}</span>
                        </div>
                    </div>
                    <div style="color: #d5d5d5;font-size: 12px;top:-10px;left: 220px;position: relative" >（建议图片大小不超过5M，支持PNG/JPG/JPEG格式）</div>
                    <div style="margin: -2px 220px;position: relative;top: -10px;">
                        <span ng-if="image==true" class="emailError">{{imageMsg}}</span>
                    </div>

                    <div class="form-group personal-second">
                        <label class="col-sm-3 control-label"><i class="red-icon">*</i>节目名称：</label>
                        <div class="col-sm-7 personal-head">
                            <input type="text" class="input" placeholder="节目名称" ng-model="formData.programName"
                                   name="programmeName" required="" ng-minlength="1" ng-maxlength="40" >
                        </div>
                    </div>

                    <div class="form-group personal-second tag" ng-if="album.albumSelected.albumId">
                        <label class="col-sm-3 control-label"><i class="red-icon">*</i>通用标签：</label>
                        <div class="col-sm-7 personal-head personal-head_a">
                            <ui-select ng-model="album.commonTagsSelected" multiple theme="bootstrap"
                                       close-on-select="false" remove-selected="false">
                                <ui-select-match placeholder="最多选择5个标签">{{$item.commtagName}}</ui-select-match>

                                <ui-select-choices repeat="tag in commonTags | filter: { commtagName: $select.search }"
                                                   group-by="commGroupFn">
                                    <span ng-bind-html="tag.commtagName | highlight: $select.search"></span>
                                </ui-select-choices>
                            </ui-select>
                            <input type="number"  ng-model="album.commonTagsSelected.length" hidden name="channelSelected" max="5" min="1" w5c-dynamic-element>

                        </div>
                    </div>
                    <div class="form-group personal-second  tag" ng-if="album.albumSelected.albumId">
                        <label class="col-sm-3 control-label"><i class="red-icon">*</i>专用标签：</label>
                        <div class="col-sm-7 personal-head personal-head_a">
                            <ui-select ng-model="album.specialTagsSelected" multiple theme="bootstrap"
                                       close-on-select="false" remove-selected="false" style="width: 100%">
                                <ui-select-match placeholder="最多选择5个标签">{{$item.specialName}}</ui-select-match>

                                <ui-select-choices repeat="tag in specialTags | filter: { specialName: $select.search }"
                                                   group-by="specialGroupFn">
                                    <span ng-bind-html="tag.specialName | highlight: $select.search"></span>
                                </ui-select-choices>
                            </ui-select>
                            <input type="number"  ng-model="album.specialTagsSelected.length" hidden name="speChannelSelected" max="5" min="1" w5c-dynamic-element>

                        </div>
                    </div>
                    <div class="form-group personal-second">
                        <label class="col-sm-3 control-label">关键词：</label>
                        <div class="col-sm-7 personal-head">
                            <input type="text" class="input" placeholder="多个关键词之间，用逗号或分号或顿号做区隔" ng-model="formData.keyword"  w5c-customizer="BaseValidations.checkKeyword(formData.keyword)" name="keyword" w5c-customizer="BaseValidations.checkKeyword(formData.keyword)">
                        </div>
                    </div>

                    <div class="form-group personal-second">
                        <label class="col-sm-3 control-label"><i class="red-icon">*</i>主播：</label>
                        <div class="col-sm-7 personal-head">
                            <input type="text" class="input" placeholder="多个主播之间，用逗号或分号或顿号做区隔" ng-model="formData.anchorName" name="anchorName" w5c-customizer="BaseValidations.checkAnchorName(formData.anchorName)">
                        </div>
                    </div>

                    <div class="form-group personal-second">
                        <label class="col-sm-3 control-label">原创：</label>
                        <div class="col-sm-7 personal-head">
                            <input type="text" class="input" placeholder="多个原创之间，用逗号或分号或顿号做区隔" ng-model="formData.originalName" name="originalName" w5c-customizer="BaseValidations.checkKeywordA(formData.originalName)">
                        </div>
                    </div>

                    <div class="form-group personal-second">
                        <label class="col-sm-3 control-label"><i class="red-icon">*</i>节目简介：</label>
                        <div class="col-sm-7 personal-head">
                            <textarea class="form-control" rows="5" ng-model="formData.summary" required name="summary" ng-minlength="10" ng-maxlength="1000"></textarea>
                        </div>
                    </div>

                    <div class="form-group personal-second">
                        <label class="col-sm-3 control-label"><i class="red-icon">*</i>音频文件：</label>
                        <div class="col-sm-7 personal-head" style="padding-top: 5px">
                            <label type="button" class="btn btn-default btn-sm btn-color" style="width: 100px;color: #fff;background: #e63d3d">
                                上传音频
                                <input type="file" nv-file-select id="audioFile" uploader="uploaderAudio"
                                       style="display: none" multiple>
                            </label>
                            <span style="color: #CCCCCC;font-size: 12px">（仅可上传一个音频，大小范围0.5-150M，支持MP3、AAC格式）</span>
                            <div style="font-size: 12px" ng-if="image_a==true"  class="emailError">
                                {{imageMsg}}
                            </div>

                            <div ng-if="list">
                                <input type="number" name="audio" hidden ng-model="list.length" min="1" w5c-dynamic-element>
                            </div>
                            <table class="table table-bordered table-hover" style="margin-top: 10px"
                                   ng-show="uploaderAudio.queue.length">
                                <thead>
                                <tr>
                                    <th>音频名称</th>
                                    <th>大小</th>
                                    <th>进度</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr ng-repeat="item in uploaderAudio.queue" ng-class="{'red':item.isSuccess=='uploadFail'}">
                                    <td><span ng-show="item.isSuccess=='uploadFail'">(上传失败)</span><span class="first-td">{{item.file.name}}</span></td>
                                    <td>{{ item.file.size/1024/1024|number:2 }} MB</td>
                                    <td>
                                        <uib-progressbar value="item.progress">{{item.progress}}%</uib-progressbar>
                                    </td>
                                    <td>
                                        <i class="fa fa-trash" aria-hidden="true" style="color: red"
                                           ng-click="removeFile($index,item);item.remove();"></i>
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                            <label type="button" class="btn btn-primary btn-sm" style="margin-top: 10px"
                                   ng-click="uploadAllAudio()"
                                   ng-show="uploaderAudio.queue.length">
                                上传
                            </label>

                            <div style="margin-top: 10px" ng-show="uploaderAudio.queue.length">已选择{{uploaderAudio.queue.length}}条</div>

                        </div>
                    </div>

                    <div class="text-center">
                        <button type="button" class="btn btn-primary" w5c-form-submit="submitSingle()"
                                style="margin-right: 15px" ng-if="uploaderAudio.queue.length==list.length" ng-disabled="sureDissbled">确定
                        </button>

                        <button class="btn btn-primary" type="button" ng-show="uploaderAudio.queue.length!=list.length">
                            {{'等待上传完成'}}
                        </button>
                    </div>
                </form>

            </section>
        </uib-tab>

        <uib-tab index="'batch'" heading="快速上传" ng-click="tabClick('batch')" disable="programId">
            <form class="form-horizontal w5c-form" name="mainForm" novalidate w5c-form-validate>

                <section class="fg-section wp-20" style="border-top: none;padding-top: 40px">
                    <div class="form-group personal-second" ng-if="noAlbum==true" style="margin-left:104px;color: red">

                        <label class="col-sm-3 control-label">请先创建专辑，再上传节目</label>

                    </div>

                    <div class="form-group personal-second">
                        <label class="col-sm-3 control-label"><i class="red-icon">*</i>选择专辑：</label>
                        <div class="col-sm-7 personal-head personal-head_a">
                            <ui-select ng-model="album.albumSelected" theme="bootstrap"
                                       style="width: 300px;float: left" >
                                <ui-select-match placeholder="请选择专辑">{{$select.selected.albumName}}</ui-select-match>

                                <ui-select-choices repeat="item in albumList | filter: $select.search">
                                    <span ng-bind-html="item.albumName | highlight: $select.search"></span>
                                </ui-select-choices>
                            </ui-select>
                            <div class="clear"></div>

                            <input type="text" hidden name="albumSelect" ng-model="album.albumSelected" required>
                        </div>

                    </div>

                    <div class="form-group personal-second">
                        <label class="col-sm-3 control-label"><i class="red-icon">*</i>音频文件：</label>
                        <div class="col-sm-7 personal-head" style="padding-top: 5px">
                            <label type="button" class="btn btn-default btn-sm" style="width: 100px;color: #fff;">
                                上传音频
                                <input type="file" nv-file-select id="audioFile2" uploader="uploaderAudio"
                                       style="display: none" multiple>
                            </label>
                            <div style="font-size: 12px" ng-if="image_a==true"  class="emailError">
                                {{imageMsg}}
                            </div>
                            <div ng-if="list.length>=0">
                                <input type="number" name="audio" hidden ng-model="list.length" min="1" w5c-dynamic-element>
                            </div>

                            <table class="table table-bordered table-hover" style="margin-top: 10px"
                                   ng-show="uploaderAudio.queue.length">
                                <thead>
                                <tr>
                                    <th>音频名称</th>
                                    <th>大小</th>
                                    <th>进度</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>

                                <tr ng-repeat="item in uploaderAudio.queue" ng-class="{'red':item.isSuccess=='uploadFail'}">
                                    <td><span ng-show="item.isSuccess=='uploadFail'">(上传失败)</span><span class="first-td">{{item.file.name}}</span></td>
                                    <td>{{ item.file.size/1024/1024|number:2 }} MB</td>
                                    <td>
                                        <uib-progressbar value="item.progress">{{item.progress}}%</uib-progressbar>
                                    </td>
                                    <td>
                                        <i class="fa fa-trash" aria-hidden="true" style="color: red"
                                           ng-click="removeFile($index,item);item.remove();"></i>
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                            <label type="button" class="btn btn-primary btn-sm" style="margin-top: 10px"
                                   ng-click="uploadAllAudio()"
                                   ng-show="uploaderAudio.queue.length">
                                上传
                            </label>

                            <div style="margin-top: 10px" ng-show="uploaderAudio.queue.length">已选择{{uploaderAudio.queue.length}}条</div>

                        </div>
                    </div>

                    <div style="margin: 30px 0px 30px 144px;color: #CCCCCC;font-size: 12px">
                        <span>上传说明：</span><br><br>
                        1.快速上传，节目信息继承专辑信息。若对节目进行单独编辑，请待上传完成，去节目管理中完善。<br>
                        2.可以批量上传音频，也可单个上传音频。<br>
                        3.文件大小0.5-150MB，支持MP3/AAC格式。单次最多20条<br>
                        4..节目上传中，请勿关闭浏览器。<br>
                    </div>

                    <div class="text-center">
                        <button type="button" class="btn btn-primary" w5c-form-submit="submitBatch()"
                                ng-show="uploaderAudio.queue.length==list.length"
                                style="margin-right: 60px" ng-disabled="disabled">确定
                        </button>
                        <button class="btn btn-primary" type="button" ng-show="uploaderAudio.queue.length!=list.length">
                            {{'等待上传完成'}}
                        </button>

                    </div>

                </section>
            </form>
        </uib-tab>
    </uib-tabset>


</div>
